<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../libs/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.css" />

    <script data-main="../js/app" src="../libs/requirejs/require.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>
    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

        }
    </style>

    <style type="text/css">
        .ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after {
            background-color: rgba(0,0,0,0);
        }
        .ui-icon-carat-r::after {
            background-image: url("../images/icon_chevron_right.png");
            background-size: 30px;
        }
        .ui-icon-carat-l::after {
            background-image: url("../images/icon_chevron_down.png");
            background-size: 26px;
        }
        .ui-icon-no::after {
            background-image: url("");
        }
        .ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head+body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body .ui-btn.ui-btn-a:visited {
            background-color: #ffffff;
        }

    </style>
    <style>
        .nor {
            width: 25px;
            height: 25px;
            background: url("../images/select.png");
        }

        .sel{
            width: 25px;
            height: 25px;
            background: url("../images/selected.png");
        }

    </style>

</head>

<body>


<!--setting页面-->
<div data-role="page" id="setting" style="background-color: rgb(218,233,248);">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 40px;display: -webkit-flex;display: flex">
        <h1 style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: auto">Setting</h1>
        <img id="setting_btn_menu" src="../images/12Menu.png" alt="" class="ui-btn-left" style="width:23px;height:23px;margin:5px 5px">
    </div>

    <!--内容-->
    <div id="setting_content" data-role="content" style="width:94%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <ul data-role="listview" data-inset="true" style="margin: 10px 0px;border-radius: 0px">
                <li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: normal">PREFERENCES</span>
                </li>
                <li style="">
                    <a class="ui-icon-carat-l" style="height: 67px;padding: 9px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">
                        Display language
                        <br/> <span style="font-weight: bold">English</span>
                    </a>
                </li>
                <li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: normal">ACCOUNT</span>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" data-transition="slide" href="forget_password.html">Change password</a>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">Change facial recognition image</a>
                </li>
                <li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: normal">SUPPORT</span>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">About this app</a>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">Terms of services</a>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">Privacy policy</a>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 16px;font-weight: normal" href="#">Report a problem</a>
                </li>
                <li style="height: 35px">

                </li>
            </ul>
        </div>

    </div>

    <!--setting页面push推出-->
    <div data-role="panel" id="setting_panel_menu" data-position="left" data-display="overlay" style="background-color: #f26647">
        <ul id="setting_push_ul" data-role="listview" style="background-color: #f26647">
            <li style="background-color: #f26647;color: #ffffff;padding: 12px 0px 32px 10px;height: 82px;">
                <span style="font-family: Arial;font-size: 16px;font-weight: normal">Welcome, <span id="setting_push_username"></span></span>
            </li>
            <li id="setting_push_newsroom" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/13ViewAll.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Newsroom</span>
                    </div>
                </div>
            </li>
            <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/39Calendar.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Activities</span>
                    </div>
                </div>
            </li>
            <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/icon-ar-solid-white-100.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Discovery</span>
                    </div>
                </div>
            </li>
            <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/29User.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">My Corner</span>
                    </div>
                </div>
            </li>
            <li id="setting_push_setting" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/44Settings.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Settings</span>
                    </div>
                </div>
            </li>
            <li id="setting_auto_height" style="background-color: #f26647;color: #ffffff;padding: 25px 0px 25px 0px">

            </li>
            <li id="setting_push_logon" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 64px" >
                <div class="ui-grid-a" style="height:100%">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                        <img src="../images/43LogOff.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                    </div>
                    <div class="ui-block-b" style="width: 80%;height:100%;display:-webkit-flex;display:flex;">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3;margin:auto 0px">Log off</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>

</body>
</html>